<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="utf-8">
  <title>Insert title here</title>
  <link href="static/easyui/themes/default/easyui.css" rel="stylesheet" />
  <link href="static/easyui/themes/icon.css" rel="stylesheet" />
  <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
</head>
<body>
<div class="input-card" style="width: 120px">
  <button class="btn" onclick="createPolygon()" style="margin-bottom: 5px">新建</button>
  <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button>
  <button class="btn" onclick="polyEditor.close()">结束编辑</button>
  <button class="btn" onclick="submit()">确定</button>
</div>
<div id="container" style="width: 100%; height: 500px"></div>

<script src="https://webapi.amap.com/loader.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=84e3d9795d4be512a87855de2a0dc85e&plugin=AMap.PolygonEditor,AMap.CitySearch"></script>

<script type="text/javascript">
  var points = [];
  var map = new AMap.Map("container", {
    center: [116.471354, 39.994257],
    zoom: 18
  });

  map.setFitView();
  var polyEditor = new AMap.PolygonEditor(map);
  polyEditor.on('add', function (data) {
    var polygon = data.target;
    var path = polygon.getPath();
    for(var i=0; i<path.length; i++) {
      points.push({"lat": path[i].lat, "lng": path[i].lng});
    }
    polyEditor.addAdsorbPolygons(polygon);
    polygon.on('dblclick', () => {
      polyEditor.setTarget(polygon);
      polyEditor.open();
      points = [];
    })
  })
  showCityInfo();



  function createPolygon() {
    polyEditor.close();
    polyEditor.setTarget();
    polyEditor.open();
  }
  polyEditor.setTarget();
  polyEditor.open();

  function submit() {
    $.messager.show({
      title:'消息提示',
      msg:'范围选择成功',
      timeout:1000,
      showType:'slide',
      style:{
        right:'',
        top:document.body.scrollTop+document.documentElement.scrollTop,
        bottom:''
      }
    });
    localStorage.points = JSON.stringify(points);
  }

  //获取用户所在城市信息
  function showCityInfo() {
    //实例化城市查询类
    var citysearch = new AMap.CitySearch();
    //自动获取用户IP，返回当前城市
    citysearch.getLocalCity(function(status, result) {
      if (status === 'complete' && result.info === 'OK') {
        if (result && result.city && result.bounds) {
          var cityinfo = result.city;
          var citybounds = result.bounds;
          //地图显示当前城市
          map.setBounds(citybounds);
        }
      } else {
        console.log(result.info)
      }
    });
  }



</script>
</body>
</html>